<!--
 * 多选组件
-->
<template>
	<page-layout class="page-layout">
		<!-- 基础使用 -->
		<app-demo-module title="基础使用">
			<pure-checkbox-group v-model="values">
				<pure-checkbox label="选项1" value="1"></pure-checkbox>
				<pure-checkbox label="选项2" value="2"></pure-checkbox>
				<pure-checkbox label="选项3" value="3"></pure-checkbox>
				<pure-checkbox label="选项4" value="4"></pure-checkbox>
				<pure-checkbox label="选项5" value="5"></pure-checkbox>
				<pure-checkbox label="选项6" value="6"></pure-checkbox>
				<pure-checkbox label="选项7" value="7"></pure-checkbox>
				<pure-checkbox label="选项8" value="8"></pure-checkbox>
			</pure-checkbox-group>
		</app-demo-module>

		<!-- 单独使用 -->
		<app-demo-module title="单独使用">
			<pure-checkbox-group v-model="values">
				<pure-checkbox
					label="我已阅读并同意《用户协议》"
					v-model="aloneStatus"
				></pure-checkbox>
			</pure-checkbox-group>
		</app-demo-module>

		<!-- 只读 -->
		<app-demo-module title="只读">
			<pure-checkbox-group v-model="values">
				<pure-checkbox
					label="我已阅读并同意《用户协议》"
					v-model="aloneStatus"
					readonly
				></pure-checkbox>
			</pure-checkbox-group>
		</app-demo-module>

		<!-- 禁用 -->
		<app-demo-module title="禁用">
			<pure-checkbox-group v-model="values">
				<pure-checkbox label="选项1" value="1" disabled></pure-checkbox>
				<pure-checkbox label="选项2" value="2" disabled></pure-checkbox>
				<pure-checkbox label="选项3" value="3" disabled></pure-checkbox>
				<pure-checkbox label="选项4" value="4" disabled></pure-checkbox>
				<pure-checkbox label="选项5" value="5" disabled></pure-checkbox>
				<pure-checkbox label="选项6" value="6" disabled></pure-checkbox>
				<pure-checkbox label="选项7" value="7" disabled></pure-checkbox>
				<pure-checkbox label="选项8" value="8" disabled></pure-checkbox>
			</pure-checkbox-group>
		</app-demo-module>
	</page-layout>
</template>

<script setup>
import { ref, computed } from "vue";

// 选中的值
const values = ref([]);

// 单独使用
const alone = ref(true);
const aloneStatus = ref(true);
</script>

<style scoped lang="scss"></style>
